<template>
	<dt-main-body v-model="labelPosition">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>商户明细</el-breadcrumb-item>
				<el-breadcrumb-item>提现管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		
		<div class="content-box">
			<el-form ref="editForm" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
				<el-tabs v-model="activeName" type="card">
					<el-tab-pane label="基本信息" name="info">
						<div class="tab-content">
							<el-form-item prop="merchantId" label="所属商户">
								<dt-merchant-select v-model="model.merchantId"></dt-merchant-select>
							</el-form-item>
							<el-form-item prop="payinfoId" label="收款方式">
								<el-select v-model="model.payinfoId" placeholder="请选择...">
									<el-option v-for="item in payinfoList"
										:key="item.id"
										:label="item.payType+'（'+item.fullName+'）'"
										:value="item.id">
									</el-option>
								</el-select>
								<el-link :underline="false" icon="el-icon-edit-outline" @click="handlePayinfoDialogShow" style="margin-left:10px;">添加</el-link>
							</el-form-item>
							<el-form-item prop="transferAmount" label="提现金额">
								<el-input v-model="model.transferAmount" placeholder="必填，可保留金额小数后两位">
									<template slot="append">元</template>
								</el-input>
							</el-form-item>
							<el-form-item label="申请备注">
								<el-input type="textarea" :rows="3" v-model="model.addRemark" maxlength="512" show-word-limit placeholder="必填，512个字符内"></el-input>
							</el-form-item>
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-form>
		</div>
		
		<div class="footer-box">
			<div class="footer-btn">
				<el-button type="primary" :loading="loading" @click="submitForm">确认保存</el-button>
				<el-button plain @click="$common.back()">返回上一页</el-button>
			</div>
		</div>
		
		<el-dialog title="添加收款方式" :visible.sync="showPayinfoDialog" fullscreen>
			<el-form ref="payForm" :model="payModel" :rules="rules" :label-position="labelPosition" label-width="100px">
				<div class="content-box" style="padding:0">
					<el-form-item prop="payType" label="转账类型">
						<el-radio-group v-model="payModel.payType" @change="payModel.bankName=null">
							<el-radio label="银行卡">银行卡</el-radio>
							<el-radio label="微信">微信</el-radio>
							<el-radio label="支付宝">支付宝</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item prop="fullName" label="收款人姓名">
						<el-input v-model="payModel.fullName" placeholder="必填，收款人的真实姓名"></el-input>
					</el-form-item>
					<el-form-item prop="bankName" label="开户银行" v-if="payModel.payType=='银行卡'">
						<el-input v-model="payModel.bankName" placeholder="必填，开户银行名称"></el-input>
					</el-form-item>
					<el-form-item prop="accountNo" label="收款账号">
						<el-input v-model="payModel.accountNo" placeholder="必填，收款人的收款账号"></el-input>
					</el-form-item>
					<el-form-item label="收款二维码">
						<dt-upload v-model="payModel.qrCode"></dt-upload>
					</el-form-item>
				</div>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" :loading="payinfoLoading" icon="el-icon-edit" @click="submitPayinfoForm">确 定</el-button>
				<el-button type="warning" @click="showPayinfoDialog=false">取 消</el-button>
			</div>
		</el-dialog>
		
	</dt-main-body>
</template>

<script>
	import DtUpload from '../../../components/DtUpload.vue'
	import DtMerchantSelect from '../../../components/DtMerchantSelect.vue'
	
	export default {
		components: {
			DtUpload,
			DtMerchantSelect
		},
		data() {
			return {
				activeName: 'info', //当前选项卡
				labelPosition: 'right', //表单对齐方式
				loading: false,
				payinfoLoading: false,
				showPayinfoDialog: false,
				payinfoList: [],
				model: {
					merchantId: 0,
					payinfoId: null,
					transferAmount: null,
					addRemark: null
				},
				payModel: {
					merchantId: 0,
					payType: null,
					fullName: null,
					bankName: null,
					accountNo: null,
					qrCode: null,
				},
				rules: {
					merchantId: [
						{ required: true, message: '请选择商户店铺', trigger: 'change' }
					],
					payinfoId: [
						{ required: true, message: '请选择收款方式', trigger: 'change' }
					],
					transferAmount: [
						{ required: true, message: '请输入提现金额', trigger: 'blur' },
						{ pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确金额，可保留两位小数', trigger: 'blur' }
					],
					payType: [
						{ required: true, message: '请选择转账类型', trigger: 'change' }
					],
					fullName: [
						{ required: true, message: '请输入收款人姓名', trigger: 'blur' }
					],
					bankName: [
						{ required: true, message: '请输入开户银行名称', trigger: 'blur' }
					],
					accountNo: [
						{ required: true, message: '请输入收款账号', trigger: 'blur' }
					],
				}
			}
		},
		methods: {
			//初始化数据
			initData() {
				let _this = this; //当前页面
				_this.$api.request({
					url: '/admin/merchant/payinfo/view/0',
					success(res) {
						_this.payinfoList = res.data;
					}
				});
			},
			//提交表单
			submitForm() {
				let _this = this; //当前页面
				//多个表单验证
				const f1 = new Promise((resolve, reject) => {
					_this.$refs['editForm'].validate((valid) => {
						if (valid) resolve();
					});
				});
				Promise.all([f1]).then(() => {
					_this.$api.request({
						method: 'post',
						url: '/admin/merchant/cash',
						data: _this.model,
						successMsg: '提现记录添加成功',
						beforeSend() {
							_this.loading = true
						},
						success(res) {
							_this.$common.linkUrl('/merchant/cash/list');
						},
						complete() {
							_this.loading = false
						}
					});
				})
			},
			//显示收款方式窗口
			handlePayinfoDialogShow() {
				let _this = this;
				if(!_this.model.merchantId) {
					_this.$message({ type: 'warning', message: '请先选择所属商户' });
					return false;
				}
				_this.payModel.merchantId = _this.model.merchantId;
				_this.showPayinfoDialog = true;
			},
			//提交收款方式表单
			submitPayinfoForm() {
				let _this = this; //当前页面
				//多个表单验证
				const f1 = new Promise((resolve, reject) => {
					_this.$refs['payForm'].validate((valid) => {
						if (valid) resolve();
					});
				});
				Promise.all([f1]).then(() => {
					_this.$api.request({
						method: 'post',
						url: '/admin/merchant/payinfo',
						data: _this.payModel,
						successMsg: '收款方式添加成功',
						beforeSend() {
							_this.loading = true
						},
						success(res) {
							_this.initData();
							_this.showPayinfoDialog = false;
							_this.$refs['payForm'].resetFields();//重置表单
						},
						complete() {
							_this.loading = false
						}
					});
				})
			},
		},
		created() {
			this.initData();
		}
	}
</script>